<template>
    
        <!-- <div style="position: relative;width:100%;height:100%;background-color: blue;"></div> -->
<div id="topic">
        <div class="topicTitle">
            文章
            <div class='topicTitles'><router-link tag='a' to="/Blogs">发现更多</router-link></div>
        </div>
        <div class='topicmain' v-show='anone' name='fade'>
            <div class="topicmainimg">
                <router-link :to="{path:'/Article',query:{aid:homeartice[0].tId}}"  ><img :src="`http://localhost:3000/upload/${homeartice[0].tlmg}`" alt=""></router-link>
            </div>
            <div class="topicText">
                <div class='topicLabel'>{{homeartice[0].label}}</div>
                <div class='topicTitle1'>
                    <router-link :to="{path:'/Article',query:{aid:homeartice[0].tId}}"  ><a href="">{{homeartice[0].title}}</a></router-link>
                </div>
                <div class="topicInf">
                    <svg t="1602065941500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="20" height="20"><path d="M916.945455 900.654545H111.709091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h805.236364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-34.90909 34.90909zM842.472727 747.054545H393.309091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h446.836364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-32.581818 34.90909zM160.581818 542.254545l104.727273 107.054546-46.545455 46.545454-104.727272-104.727272zM558.545455 141.963636l104.727272 107.054546-48.872727 46.545454-104.727273-104.727272z" fill="#8a8a8a" p-id="2281"></path><path d="M128 765.672727c-20.945455 0-41.890909-9.309091-58.181818-25.6-16.290909-16.290909-25.6-41.890909-25.6-65.163636l9.309091-114.036364L537.6 74.472727c23.272727-23.272727 53.527273-34.909091 86.109091-34.909091 37.236364 0 72.145455 16.290909 97.745454 41.890909 27.927273 27.927273 41.890909 65.163636 41.89091 102.4 0 32.581818-13.963636 62.836364-37.236364 83.781819l-479.418182 488.727272-114.036364 9.309091h-4.654545z m-4.654545-174.545454L116.363636 679.563636c0 4.654545 2.327273 9.309091 4.654546 9.309091 2.327273 2.327273 6.981818 4.654545 9.309091 4.654546l88.436363-6.981818L677.236364 216.436364c9.309091-9.309091 13.963636-20.945455 16.290909-34.909091 0-18.618182-6.981818-37.236364-20.945455-51.2-13.963636-13.963636-30.254545-20.945455-48.872727-20.945455-9.309091 0-23.272727 2.327273-34.909091 13.963637l-465.454545 467.781818z" fill="#8a8a8a" p-id="2282"></path></svg>
                    · {{homeartice[0].tTime |time}} 
                    <svg t="1602066216052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2819" width="20" height="20"><path d="M512 716.8c-105.198933 0-191.146667-85.947733-191.146667-191.146667s85.947733-191.146667 191.146667-191.146666 191.146667 85.947733 191.146667 191.146666S617.198933 716.8 512 716.8z m0-54.613333c75.025067 0 136.533333-61.508267 136.533333-136.533334s-61.508267-136.533333-136.533333-136.533333-136.533333 61.508267-136.533333 136.533333 61.508267 136.533333 136.533333 136.533334z m0 218.453333c-178.688 0-315.050667-116.872533-407.586133-344.712533a27.306667 27.306667 0 0 1 0-20.548267C196.9152 287.5392 333.312 170.666667 512 170.666667s315.050667 116.872533 407.586133 344.712533a27.306667 27.306667 0 0 1 0 20.548267C827.0848 763.767467 690.688 880.64 512 880.64z m0-54.613333c151.04 0 268.151467-98.235733 352.768-300.373334-84.650667-202.1376-201.728-300.373333-352.768-300.373333-151.04 0-268.151467 98.235733-352.768 300.373333 84.650667 202.1376 201.728 300.373333 352.768 300.373334z" p-id="2820" fill="#8a8a8a"></path></svg>
                    · {{homeartice[0].likeCilck}}次点赞
                </div>
                <div class='topicContent'>
                    {{homeartice[0].content}}
                </div>
                <div class="topicAuthor">
                    <router-link   :to="{path:'/UserOthDynamic',query:{uid:homeartice[0].uId}}"><img :src="`http://localhost:3000/upload/${homeartice[0].headImg}`" alt=""></router-link>
                    <router-link tag="p"  :to="{path:'/UserOthDynamic',query:{uid:homeartice[0].uId}}"><div class="topicAuthorName">{{homeartice[0].nickName}}</div></router-link>
                    <div class="topicAuthorIntroduce">{{homeartice[0].Signature}}</div>
                    <div id="topicchange">
                        <svg t="1602067884105" @click="anone=!anone" style="transform: rotateY(180deg);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                        <svg t="1602067884105" @click="anone=!anone" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        <transition name="fade">
        <div class='topicmain2 fade' v-show='!anone' >
            <div class="topicmainimg">
                <router-link :to="{path:'/Article',query:{aid:homeartice[1].tId}}"  ><img :src="`http://localhost:3000/upload/${homeartice[1].tlmg}`" alt=""></router-link>
            </div>
            <div class="topicText">
                <div class='topicLabel'>{{homeartice[1].label}}</div>
                <div class='topicTitle1'>
                    <router-link :to="{path:'/Article',query:{aid:homeartice[1].tId}}"  ><a href="">{{homeartice[1].title}}</a></router-link>
                </div>
                <div class="topicInf">
                    <svg t="1602065941500" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2280" width="20" height="20"><path d="M916.945455 900.654545H111.709091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h805.236364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-34.90909 34.90909zM842.472727 747.054545H393.309091c-18.618182 0-34.909091-16.290909-34.909091-34.90909s16.290909-34.909091 34.909091-34.909091h446.836364c18.618182 0 34.909091 16.290909 34.90909 34.909091s-13.963636 34.909091-32.581818 34.90909zM160.581818 542.254545l104.727273 107.054546-46.545455 46.545454-104.727272-104.727272zM558.545455 141.963636l104.727272 107.054546-48.872727 46.545454-104.727273-104.727272z" fill="#8a8a8a" p-id="2281"></path><path d="M128 765.672727c-20.945455 0-41.890909-9.309091-58.181818-25.6-16.290909-16.290909-25.6-41.890909-25.6-65.163636l9.309091-114.036364L537.6 74.472727c23.272727-23.272727 53.527273-34.909091 86.109091-34.909091 37.236364 0 72.145455 16.290909 97.745454 41.890909 27.927273 27.927273 41.890909 65.163636 41.89091 102.4 0 32.581818-13.963636 62.836364-37.236364 83.781819l-479.418182 488.727272-114.036364 9.309091h-4.654545z m-4.654545-174.545454L116.363636 679.563636c0 4.654545 2.327273 9.309091 4.654546 9.309091 2.327273 2.327273 6.981818 4.654545 9.309091 4.654546l88.436363-6.981818L677.236364 216.436364c9.309091-9.309091 13.963636-20.945455 16.290909-34.909091 0-18.618182-6.981818-37.236364-20.945455-51.2-13.963636-13.963636-30.254545-20.945455-48.872727-20.945455-9.309091 0-23.272727 2.327273-34.909091 13.963637l-465.454545 467.781818z" fill="#8a8a8a" p-id="2282"></path></svg>
                    · {{homeartice[1].tTime | time}} 
                    <svg t="1602066216052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2819" width="20" height="20"><path d="M512 716.8c-105.198933 0-191.146667-85.947733-191.146667-191.146667s85.947733-191.146667 191.146667-191.146666 191.146667 85.947733 191.146667 191.146666S617.198933 716.8 512 716.8z m0-54.613333c75.025067 0 136.533333-61.508267 136.533333-136.533334s-61.508267-136.533333-136.533333-136.533333-136.533333 61.508267-136.533333 136.533333 61.508267 136.533333 136.533333 136.533334z m0 218.453333c-178.688 0-315.050667-116.872533-407.586133-344.712533a27.306667 27.306667 0 0 1 0-20.548267C196.9152 287.5392 333.312 170.666667 512 170.666667s315.050667 116.872533 407.586133 344.712533a27.306667 27.306667 0 0 1 0 20.548267C827.0848 763.767467 690.688 880.64 512 880.64z m0-54.613333c151.04 0 268.151467-98.235733 352.768-300.373334-84.650667-202.1376-201.728-300.373333-352.768-300.373333-151.04 0-268.151467 98.235733-352.768 300.373333 84.650667 202.1376 201.728 300.373333 352.768 300.373334z" p-id="2820" fill="#8a8a8a"></path></svg>
                    · {{homeartice[1].likeCilck}}次点赞
                </div>
                <div class='topicContent'>
                    {{homeartice[1].content}}
                </div>
                <div class="topicAuthor">
                    <router-link   :to="{path:'/UserOthDynamic',query:{uid:homeartice[1].uId}}"><img :src="`http://localhost:3000/upload/${homeartice[1].headImg}`" alt=""></router-link>
                    <div class="topicAuthorName">{{homeartice[1].nickName}}</div>
                    <div class="topicAuthorIntroduce">{{homeartice[1].Signature}}</div>
                    <div id="topicchange">
                        <svg t="1602067884105" @click="anone=!anone" style="transform: rotateY(180deg);" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                        <svg t="1602067884105" @click="anone=!anone" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                    </div>
                </div>
            </div>
        </div>
        </transition>
        <div class="topicother">
            <div class="topicotherLeft">
                <div class="topicotherLefts">
                    <div class="topicotherimg">
                        <img :src="`http://localhost:3000/upload/${homeartice[10].tlmg}`" alt="">
                    </div>
                    <div class="topicotherotherright">
                        <div class="label">{{homeartice[10].label}}</div>
                        <h3>{{homeartice[10].title}}</h3>
                        <p>{{homeartice[10].content}}</p>
                        <span>READ MORE &nbsp;&nbsp;&nbsp;
                            <router-link :to="{path:'/Article',query:{aid:homeartice[1].tId}}"  >
                            <svg t="1602067884105" @click="anone=!anone" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                            </router-link>
                        </span>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div class="topicotherLefts">
                    <div class="topicotherimg">
                        <img :src="`http://localhost:3000/upload/${homeartice[9].tlmg}`" alt="">
                    </div>
                    <div class="topicotherotherright">
                        <div class="label">{{homeartice[9].label}}</div>
                        <h3>{{homeartice[9].title}}</h3>
                        <p>{{homeartice[9].content}}</p>
                        <span>READ MORE &nbsp;&nbsp;&nbsp;
                            <router-link :to="{path:'/Article',query:{aid:homeartice[1].tId}}"  >
                            <svg t="1602067884105" @click="anone=!anone" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1395" width="20" height="20"><path d="M1010.80577 455.530292a29.72694 29.72694 0 0 1 0 42.037895L758.668226 749.785575a29.714963 29.714963 0 0 1-42.017934-42.027914l252.137544-252.227369a29.720951 29.720951 0 0 1 42.017934 0zM758.668226 203.312904l252.137544 252.217388a29.717957 29.717957 0 0 1-42.017934 42.037895l-252.137544-252.207407a29.721949 29.721949 0 0 1 42.017934-42.047876zM27.945419 447.20655h955.693411a20.460039 20.460039 0 0 1 20.460039 20.460039v18.254347a20.460039 20.460039 0 0 1-20.460039 20.460039H27.945419A20.460039 20.460039 0 0 1 7.48538 485.920936v-18.254347a20.460039 20.460039 0 0 1 20.460039-20.460039z" fill="#8a8a8a" p-id="1396"></path></svg>
                            </router-link>
                        </span>
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>
            <div class="topicotherRight">
                <div class="topicotherSpan">
                    <span  @click="sanone1">最热文章</span ><span  @click="sanone2">推荐文章</span>
                </div>
                <div class='topicotherhot' v-if="sanone==1">
                    <div class="topicotherSmall" v-for="artice in homeartice.slice(0,4)"  :key='artice.tId'>
                        <router-link :to="{path:'/Article',query:{aid:artice.tId}}" ><img :src="`http://localhost:3000/upload/${artice.tlmg}`" alt=""></router-link>
                        <div class="topicotherSmalllabel" >{{artice.label}}</div>
                        <div class="topicotherSmalltitle"><router-link :to="{path:'/Article',query:{aid:artice.tId}}" ><a href="">{{artice.title}}</a></router-link></div>
                        <div class='topicotherSmalltime'>{{artice.tTime |time}} · {{artice.likeCilck}}次点赞</div>
                    </div>
                    
                </div>
                <div class='topicotherrecommend' v-if="sanone==2">
                    <div class="topicotherSmall" v-for="artice in homeartice.slice(2,6)"  :key='artice.tId'>
                        <router-link :to="{path:'/Article',query:{aid:artice.tId}}" ><img :src="`http://localhost:3000/upload/${artice.tlmg}`" alt=""></router-link>
                        <div class="topicotherSmalllabel" >{{artice.label}}</div>
                        <div class="topicotherSmalltitle"><router-link :to="{path:'/Article',query:{aid:artice.tId}}" ><a href="">{{artice.title}}</a></router-link></div>
                        <div class='topicotherSmalltime'>{{artice.tTime |time}} · {{artice.likeCilck}}次点赞</div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
    
    
</template>
<script>
export default {
    data(){
        return{
            homeartice:'',
            anone:true,
            sanone:true
        }
    },
    created() {
        this.$axios.get('/api/article/articlepopular',{params:{category: "%"}})
        .then(res=>{
          console.log('res:',res.data),
          this.homeartice=res.data.data
        //   console.log(this.homeartice.data[0])
        })
        .catch(err=>{
          console.log('err:',err)
        })
    },
    filters:{
      time:function(value){
         let pTime=[]
        for(let i=0;i<value.length;i++){
          if(value[i]!='T'){
            pTime.push(value[i])
          }else{
            break 
          }
        }
        let pTimes=pTime.join('')
        return pTimes
      }
  },
  methods:{
        sanone1(){
            console.log('ok')
            this.sanone=1
        },
        sanone2(){
            this.sanone=2
        }
  }
}
</script>
<style>

        .fade-enter-active,.fade-leave-active{
            transition: all 1s ;
            /* animation: myAnimation 3s; */
        }
        .fade-enter,.fade-leave-to{
            opacity: 0;
        }
        .fade-enter-to,.fade-leave{
            opacity: 1;
        }

body,html{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            /* cursor: default; */
            /* display: block; */
            /* overflow: hidden; */
            animation: bgbody 1.5s ease;
        }
        #topic{
            position: relative;
            top: 100%;
            width: 100%;
            height:1300px;
            background-color:rgb(244,245,249);
            box-sizing: border-box;
            padding: 60px 0;
            /* background-image: url(images/abg.jpg); */
        }
        #topic .topicTitle{
            position: relative;
            margin-top: 20px;
            margin-bottom: 20px;
            left: 50%;
            width: 1200px;
            height:60px;
            transform: translateX(-50%);
            color: rgba(0,0,0,.1);
            font-size: 50px;
            font-weight: 700;
            font-family: "黑体",cursive;
        }
        #topic .topicTitle .topicTitles{
            position:absolute;
            width: 1200px;
            height:60px;
            line-height: 50px;
            top: 0;
            /* font-weight: 400; */
            
            padding-left: 110px;
            box-sizing: border-box;
        }
        #topic .topicTitle .topicTitles a{
            letter-spacing:3px;
            font-family:weiruanyahei;
            font-size: 22px;
            color:  rgba(25,161,253,1);
            text-decoration: none;
            transition: all 0.4s;
        }
        #topic .topicTitle .topicTitles a:hover{
            color:  rgba(13, 105, 224, 0.9);

        }
        #topic .topicmain,.topicmain2{
            width: 1200px;
            height: 410px;
            position: absolute;
            left: 50%;
            margin-top: 30px;
            transform: translateX(-50%);
            background-color: white;
            border-radius: 10px;
            
        }
        #topic .topicmain{
            z-index:98;
            opacity: 1;
            transition: all 1s;
        }
        #topic .topicmain2{
            z-index:97;
            opacity: 1;
            transition: all 1s;
        }
        #topic .topicmainimg{
            width: 580px;
            height: 410px;
            overflow: hidden;
            float: right;
        }
        #topic  img{
            float: right;
            width: 580px;
            height: 410px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            object-fit: cover;
            transition: all 0.3s;
        }
        #topic .topicmainimg img:hover{  
            transform: scale(1.1);  
        }
        #topic  .topicText {
            /* float: left; */
            width: 600px;
            height: 410px;
            box-sizing: border-box;
            padding: 30px;
        }
        #topic  .topicText .topicLabel{
            display: inline-block;
            height: 30px;
            line-height: 30px;
            font-size: 18px;
            font-family: heiti;
            box-sizing: border-box;
            padding:0 18px;
            color: white;
            background-color: rgb(25,161,253);
            border-radius: 25px;
            letter-spacing: 4px;
        }
        #topic  .topicText .topicTitle1{
            width: 560px;
            height: 80px;
            margin:20px 0px;
            font-weight: 700;
            transform: all .5s;
            
        }
        #topic  .topicText .topicTitle1 a{
            text-decoration: none;
            color: #000;
            font-size: 32px;
            line-height: 1.3;
            font-weight: 700;
            transition: all .5s;
        }
        #topic  .topicText .topicTitle1 a:hover{
            color: rgb(25,161,253);
        }
        #topic  .topicText .topicInf{
            width: 500px;
            height: 30px;
            line-height: 30px;
            margin:20px 0px;
            color: #717375;
            font-size: 15px;
            position: relative;
            /* background-color: rgb(116, 248, 248); */
        }
        #topic  .topicText .topicInf svg{
            position: relative;;
            /* top: 50%; */
            /* transform: translateY(-50%); */
        }
        #topic  .topicText .topicContent{
            width: 540px;
            height: 70px;
            margin:20px 0px;
            /* background-color: rgb(72, 223, 117); */
            color: #717375;
            font-size: 15px;
            line-height: 1.4;
            font-family: weiruanyahei;
            font-weight: 500;
        }
        #topic  .topicText .topicAuthor{
            width: 300px;
            height: 50px;
            /* background-color: rgb(188, 223, 72); */
        }
         #topic  .topicText .topicAuthor p{
             margin-bottom: 5px;
         }
        #topic  .topicText .topicAuthor img{
            width: 50px;
            height: 50px;
            border-radius: 5px;
            float: left;
        }
        #topic  .topicText .topicAuthor .topicAuthorName{
            height: 24px;
            width: 200px;
            line-height: 24px;
            font-size: 18px;
            font-weight: bolder;
            padding-left:70px ;
            letter-spacing:2px;
            margin-bottom: 6px;
            cursor: pointer;
        }
        #topicchange svg{
            cursor: pointer;
        }
        #topic  .topicText .topicAuthor .topicAuthorIntroduce{
            height: 20px;
            width: 200px;
            font-size: 15px;
            padding-left:70px ;
            color: #717375;
            letter-spacing:1px
        }
        #topic  .topicText .topicAuthor #topicchange{
            position: absolute;
            top: 100%;
            margin-top: -40px;
            margin-left:500px
        }
        #topic .topicother{
            position: absolute;
            width: 1200px;
            left: 50%;
            transform:translateX(-50%);
            top:650px;
        }
        #topic .topicother .topicotherLeft{
            float: left;
            width: 800px;
            /* height: 100px; */
        }
        #topic .topicother .topicotherLefts{
            width: 800px;
            margin-top: 20px;
            margin-bottom: 40px;
            /* height: 100px; */
        }
        #topic .topicother .topicotherLefts .topicotherimg{
            float: left;
        }
        #topic .topicother .topicotherLefts img{
            width: 340px;
            height: 260px;
            float: left;
            border-radius: 5px;
        }
        #topic .topicother .topicotherLefts .topicotherotherright{
            width: 430px;
            padding-left: 30px;
            float: right;
        }
        #topic .topicother .topicotherLefts .label{
            height: 24px;
            line-height: 24px;
            color: white;
            margin-left: 6px;
            margin-top: 6px;
            margin-bottom: 10px;
            border-radius: 16px;
            background-color: rgb(25,161,253);
            padding: 0px 15px;
            font-size: 16px;
            letter-spacing: .2em;
            display: inline-block;
        }
        #topic .topicother .topicotherLefts h3{
            width: 390px;
            font-size: 26px;
            letter-spacing: .1em;
            font-weight: 700;
            line-height: 1.3;
        }
        #topic .topicother .topicotherLefts p{
            width: 390px;
            font-size: 16px;
            color: #717375;
        }
        #topic .topicother .topicotherLefts span{
            font-weight: 700;
        } 
        #topic .topicother .topicotherRight{
            float: right;
            width: 370px;
            height: 610px;
            background-color:white;
            border-radius: 5px;
            box-sizing: border-box;
            padding:30px 0px 0px 30px;
            box-shadow: 0 0 40px 0 rgba(0,0,0,0.05);
        }
        #topic .topicother .topicotherRight .topicotherSpan{
            height: 35px;
            line-height: 35px;
        }
        #topic .topicother .topicotherRight span{
            font-size: 22px;
            /* font-weight: bolder; */
            margin-right: 18px;
            letter-spacing: 2px;
            transition: all .2s;
            overflow: hidden;
        }
        #topic .topicother .topicotherRight span:first-child{
            font-size: 28px;
            color: #495057;;
        }
        
        #topic .topicother .topicotherRight span:hover{
            color: rgb(25,161,253);
        }
        #topic .topicother .topicotherRight .topicotherhot,.topicotherrecommend{
            position: absolute;
            transition: all .5s;
        }
        .topicotherhot{
            opacity: 1;
            z-index: 98;
        }
        .topicotherrecommend{
            /* opacity: 0; */
            z-index: 97;
        }
        #topic .topicother .topicotherRight .topicotherSmall{
            margin: 30px 0px;
            width: 340px;
            height: 100px;
            /* background-color: rgba(25,161,253,0.5);  */
        }
        #topic .topicother .topicotherRight .topicotherSmall img{
            width: 120px;
            height: 100px;
            float: left;
            border:1px solid rgba(0,0,0,.1);
            border-radius: 5px;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalllabel{
            height: 24px;
            line-height: 24px;
            color: white;
            margin-left: 10px;
            border-radius: 16px;
            background-color: rgb(25,161,253);
            padding: 0px 15px;
            font-size: 14px;
            display: inline-block;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltitle{
            height: 50px;
            line-height: 24px;
            margin-left: 130px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow:ellipsis; 
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltitle a{
            font-size: 18px;
            letter-spacing: 1px;
            text-decoration: none;
            color: #000;
            font-weight: bolder;
        }
        #topic .topicother .topicotherRight .topicotherSmall .topicotherSmalltime{
            height: 20px;
            font-size: 14px;
            color: #889097;
            letter-spacing: 1px;
            margin-left: 130px;
            margin-top: 5px;
        }
</style>